<template>
  <div id="BasicLayout">
    <a-layout>
      <a-layout-header class="Header">
        <GlobalHeader />
      </a-layout-header>
      <a-layout-content class="Content">
        <div style="padding: 20px">
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer class="Footer">Footer</a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup>
import GlobalHeader from '../layouts/GlobalHeader.vue'
</script>

<style scoped>
#BasicLayout{
  height: 100%;
  background: url("../assets/background.png") 0% 0% / 100% 100%;
  display: flex;
  flex-direction: column;
  background-size: cover;
  min-height: 100vh;
}
#BasicLayout .Header {
  /*margin-bottom: 16px;*/
  background-color: rgba(228,248,253,0.5); /* 设置透明背景颜色 */
}
#BasicLayout .Content {
  background: url("../assets/background.png") 0% 0% / 100% 100%;
  padding: 20px 50px;
  margin-bottom: 16px;
  height: 80vh;
  background-size: cover; /* 让背景图铺满整个页面 */
}
#BasicLayout .Footer {
  background-color: rgba(255, 255, 255, 0.5); /* 设置透明背景颜色 */
  width: 100%;
  padding: 16px;
  position: sticky;
  text-align: center;
}
</style>